<template>
  <div class="test-translation">
    <h1>翻译测试页面</h1>
    
    <div class="test-section">
      <h2>StudentList 相关翻译测试</h2>
      <ul>
        <li>studentProfile: {{ $t('assets.studentList.studentProfile') }}</li>
        <li>student: {{ $t('assets.studentList.student') }}</li>
        <li>group: {{ $t('assets.studentList.group') }}</li>
        <li>newStudent: {{ $t('assets.studentList.newStudent') }}</li>
        <li>detail: {{ $t('assets.studentList.detail') }}</li>
      </ul>
    </div>
    
    <div class="test-section">
      <h2>Common 翻译测试</h2>
      <ul>
        <li>delete: {{ $t('common.delete') }}</li>
        <li>confirm: {{ $t('common.confirm') }}</li>
        <li>cancel: {{ $t('common.cancel') }}</li>
      </ul>
    </div>
    
    <div class="test-section">
      <h2>原始翻译键测试</h2>
      <ul>
        <li>原始键: assets.studentList.studentProfile</li>
        <li>原始键: assets.studentList.student</li>
        <li>原始键: assets.studentList.group</li>
        <li>原始键: assets.studentList.newStudent</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { t as $t } from '@/plugins/i18nPlugin'

// 在控制台输出测试信息
console.log('=== 翻译测试 ===')
console.log('studentProfile:', $t('assets.studentList.studentProfile'))
console.log('student:', $t('assets.studentList.student'))
console.log('group:', $t('assets.studentList.group'))
console.log('newStudent:', $t('assets.studentList.newStudent'))
console.log('delete:', $t('common.delete'))
</script>

<style scoped>
.test-translation {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.test-section h2 {
  color: #333;
  margin-bottom: 15px;
}

.test-section ul {
  list-style-type: none;
  padding: 0;
}

.test-section li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.test-section li:last-child {
  border-bottom: none;
}
</style>
